<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src='vue.js'></script>
</head>
<body>
	<div id="app">
		<child content="Dell"></child>
		<child content="Lee"></child>
	</div>

	<script>

		Vue.prototype.bus = new Vue();

		Vue.component('child', {
			props: {
				content: {
					type: String
				}
			},
			data () {
				return {
					selfContent: this.content
				}
			},
			template: '<div @click="handleClick">{{selfContent}}</div>',
			methods: {
				handleClick () {
					this.bus.$emit('change', this.selfContent)
				}
			},
			mounted () {
				this.bus.$on('change', (msg) => {
					this.selfContent = msg;
				})
			}
		})

		var app = new Vue({
			el: '#app',
			data: {
			
			}
		})

		
	</script>
</body>
</html>